<template>
	<view class="generate-form">
		<view class="row" :class="{ 'row-active': activeType.indexOf(item.type) >= 0 && !item.options.disabled && item.options.writable }" :style="{ 'flex-direction': formConfig.labelPosition == 'top' ? 'column' : 'row' }" v-for="(item, index) in formData" :key="item.model">
			
			<!-- Label -->
			<view v-if="!item.options.hideLabel && item.readable" :class="['title', { leftPosition: formConfig.labelPosition == 'left', rightPosition: formConfig.labelPosition == 'right', topPosition: formConfig.labelPosition == 'top' }]">
				<text class="validate-icon" v-if="item.options.required">* &nbsp;</text>
				<text>{{ item.name }}</text>
			</view>
			
			<!-- 输入框 -->
			<view v-if="item.type == 'input' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-input 
					v-model="item.value" 
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:placeholder="item.options.placeholder" 
					:password="item.options.showPassword"
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '不能为空'"
					:dataType="item.options.dataType"
					:dataTypeCheck="item.options.dataTypeCheck || false"
					:dataTypeMessage="item.options.dataTypeMessage"
					:pattern="item.options.pattern"
					:patternCheck="item.options.patternCheck || false"
					:patternMessage="item.options.patternMessage"
				/>
			</view>
			
			<!-- 多行文本 -->
			<view v-if="item.type == 'textarea' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-textarea 
					v-model="item.value" 
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:placeholder="item.options.placeholder" 
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '不能为空'"
				/>
			</view>
			
			<!-- 计数器 -->
			<view v-if="item.type == 'number' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-input-number 
					v-model="item.value" 
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:max="item.options.max" 
					:min="item.options.min" 
					:step="item.options.step"
				/>
			</view>
			
			<!-- 单选框 -->
			<view v-if="item.type == 'radio' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-radio 
					v-model="item.value" 
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:placement="item.options.inline ? 'row' : 'column'" 
					:defaultProps="item.options.props" 
					:radioData="item.options.options" 
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '不能为空'"
				/>
			</view>
			
			<!-- 复选框 -->
			<view v-if="item.type == 'checkbox' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-checkbox 
				  v-model="item.value" 
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:placement="item.options.inline ? 'row' : 'column'" 
					:defaultProps="item.options.props" 
					:checkboxData="item.options.options" 
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '不能为空'"
				/>
			</view>
			
			<!-- 时间选择器 -->
			<view v-if="item.type == 'time' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-time 
				  v-model="item.value" 
				  :disabled="item.options.disabled" 
					:writable="item.writable"
				  :required="item.options.required" 
				  :requiredMessage="item.options.requiredMessage || '不能为空'"
					:clearable="item.options.clearable"
				  :placeholder="item.options.placeholder || '请选择时间'"
				/>
			</view>
			
			<!-- 日期选择器 -->
			<view v-if="item.type == 'date' && item.options.type == 'date' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-date 
					v-model="item.value" 
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '不能为空'"
					:clearable="item.options.clearable"
				  :placeholder="item.options.placeholder || '请选择日期'"
				/>
			</view>
			
			<!-- 日期时间选择器 -->
			<view v-if="item.type == 'date' && item.options.type == 'datetime' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-datetime 
					v-model="item.value" 
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '不能为空'"
					:clearable="item.options.clearable"
				  :placeholder="item.options.placeholder || '请选择日期'"
				/>
			</view>
			
			<!-- 日期范围选择器 -->
			<view v-if="item.type == 'date' && item.options.type == 'daterange' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-daterange
					v-model="item.value" 
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '不能为空'"
					:clearable="item.options.clearable"
				  :startPlaceholder="item.options.startPlaceholder || '开始日期'"
				  :endPlaceholder="item.options.endPlaceholder || '结束日期'"
				/>
			</view>
			
			<!-- 日期时间范围选择器 -->
			<view v-if="item.type == 'date' && item.options.type == 'datetimerange' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-datetimerange
					v-model="item.value" 
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '不能为空'"
					:clearable="item.options.clearable"
				  :startPlaceholder="item.options.startPlaceholder || '开始日期'"
				  :endPlaceholder="item.options.endPlaceholder || '结束日期'"
				/>
			</view>
			
			<!-- 评分 -->
			<view v-if="item.type == 'rate' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-rate v-model="item.value" :disabled="item.options.disabled" :writable="item.writable" />
			</view>
			
			<!-- 颜色选择器 -->
			<view v-if="item.type == 'color' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-color v-model="item.value" :disabled="item.options.disabled" :writable="item.writable" />
			</view>
			
			<!-- 下拉选择器(单选)-->
			<view v-if="(item.type == 'select' || item.type == 'dict') && !item.options.multiple && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-picker-radio 
				 v-model="item.value" 
				 :disabled="item.options.disabled" 
				 :writable="item.writable"
				 :defaultProps="item.options.props" 
				 :columns="item.options.options || []" 
				 :required="item.options.required" 
				 :requiredMessage="item.options.requiredMessage || '不能为空'" 
				 :placeholder="item.options.placeholder"
				 :clearable="item.options.clearable || false"
				 @pickerChange="pickerRadioChange"
				/>
			</view>
			
			<!-- 下拉选择器(多选)-->
			<view v-if="item.type == 'select' && item.options.multiple && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-picker-multiple 
					v-model="item.value"
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:defaultProps="item.options.props" 
					:columns="item.options.options || []" 
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '不能为空'" 
					:placeholder="item.options.placeholder"
					:filterable="item.options.filterable"
				  :clearable="item.options.clearable"
				/>
			</view>
			
			<!-- 用户(单选)-->
			<view v-if="item.type == 'user' && !item.options.isMultiple && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-picker-radio 
				 v-model="item.value" 
				 :disabled="item.options.disabled" 
				 :writable="item.writable"
				 :defaultProps="item.options.props" 
				 :columns="item.options.options || []" 
				 :required="item.options.required" 
				 :requiredMessage="item.options.requiredMessage || '用户不能为空'" 
				 :placeholder="item.options.placeholder"
				 :clearable="item.options.clearable || false"
				 @pickerChange="pickerRadioChange"
				/>
			</view>
			
			<!-- 用户(多选)-->
			<view v-if="item.type == 'user' && item.options.isMultiple && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-picker-multiple 
					v-model="item.value"
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:defaultProps="item.options.props" 
					:columns="item.options.options || []" 
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '用户不能为空'" 
					:placeholder="item.options.placeholder"
					:filterable="item.options.isSearch || false"
				  :clearable="item.options.clearable"
				/>
			</view>
			
			<!-- 开关 -->
			<view v-if="item.type == 'switch' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-switch v-model="item.value" :disabled="item.options.disabled" :writable="item.writable" />
			</view>
			
			<!-- 滑块 -->
			<view v-if="item.type == 'slider' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-slider
					v-model="item.value" 
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:max="item.options.max" 
					:min="item.options.min" 
					:step="item.options.step"
				/>
			</view>
			
			<!-- 子表单 -->
			<view v-if="item.type == 'table' && item.readable" :class="['right-frame', {'table-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<sub-form-slot v-for="(subForm, idx) in item.subFormList" :key="idx" :idx="idx">
					<generate-form :ref="`subForm${index}${idx}`" :data="subForm || []" :config="formConfig" :serverUrl="serverUrl" :tokenKey="tokenKey"></generate-form>
					<!-- 移除子表单 -->
					<view v-if="item.writable" class="remove-subform" @tap="deleteSubForm(item.subFormList, index, idx)">
						<text>删除</text>
					</view>
				</sub-form-slot>
				<!-- 添加 -->
				<view v-if="item.writable" class="addSubForm" @tap="addSubForm(item.subFormList)">
					<view>
						<u-icon name="plus" color="#3c9cff"></u-icon>
						<u--text type="primary" text="添加"></u--text>
					</view>
				</view>
			</view>
			
			<!-- 下拉树 -->
			<view v-if="(item.type == 'selectTree' || item.type == 'office' || item.type == 'area') && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-tree-select
					v-model="item.value"
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:placeholder="item.options.placeholder || '请选择'" 
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '不能为空'"
					:defaultProps="item.options.props"
					:checkbox="item.options.checkbox || false"
					:isOnlySelectLeaf="item.options.isOnlySelectLeaf || false"
					:clearable="item.options.clearable || false"
					:search="item.options.isSearch || false"
					:listData="item.options.options || []"
				/>
			</view>
			
			<!-- HTML -->
			<view v-if="item.type == 'html' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-html v-model="item.value" />
			</view>
			
			<!-- 文字 -->
			<view v-if="item.type == 'text' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-text v-model="item.value" />
			</view>
			
			<!-- 级联选择 -->
			<view v-if="item.type == 'cascader' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-cascader 
					v-model="item.value" 
					:placeholder="item.options.placeholder" 
					:required="item.options.required" 
					:requiredMessage="item.options.requiredMessage || '不能为空'"
					:defaultProps="item.options.props"
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:clearable="item.options.clearable"
					:options="item.options.options"
				/>
			</view>
			
			<!-- 编辑器 -->
			<view v-if="item.type == 'editor' && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-editor 
					v-model="item.value"
					:required="item.options.required"
					:requiredMessage="item.options.requiredMessage || '不能为空'"
					:disabled="item.options.disabled" 
					:writable="item.writable"
				/>
			</view>
			
			<!-- 文件 / 图片 -->
			<view v-if="(item.type == 'imgupload' || item.type=='fileupload') && item.readable" :class="['right-frame', {'lot-frame': item.options.hideLabel || formConfig.labelPosition == 'top'}]">
				<xps-upload
					v-model="item.value" 
					:required="item.options.required"
					:requiredMessage="item.options.requiredMessage || '不能为空'"
					:disabled="item.options.disabled" 
					:writable="item.writable"
					:multiple="item.options.multiple"
					:deletable="item.options.isDelete"
					:limit="item.options.limit" 
					:action="item.options.action"
					:serverUrl="serverUrl"
					:tokenKey="tokenKey"
				/>
			</view>
		</view>
  </view>
</template>

<script>
import { isEmpty, isValidInput } from './utils'
import XpsInput from './xps-input/xps-input.vue'
import XpsTextarea from './xps-textarea/xps-textarea.vue'
import XpsInputNumber from './xps-input-number/xps-input-number.vue'
import XpsRadio from './xps-radio/xps-radio.vue'
import XpsCheckbox from './xps-checkbox/xps-checkbox.vue'
import XpsTime from './xps-time/xps-time.vue'
import XpsDate from './xps-date/xps-date.vue'
import XpsDatetime from './xps-datetime/xps-datetime.vue'
import XpsDaterange from './xps-daterange/xps-daterange.vue'
import XpsDatetimerange from './xps-datetimerange/xps-datetimerange.vue'
import XpsRate from './xps-rate/xps-rate.vue'
import XpsColor from './xps-color/xps-color.vue'
import XpsPickerRadio from './xps-picker-radio/xps-picker-radio.vue'
import XpsPickerMultiple from './xps-picker-multiple/xps-picker-multiple.vue'
import XpsSwitch from './xps-switch/xps-switch.vue'
import XpsSlider from './xps-slider/xps-slider.vue'
import XpsTreeSelect from './xps-tree-select/xps-tree-select.vue'
import XpsHtml from './xps-html/xps-html.vue'
import XpsText from './xps-text/xps-text.vue'
import XpsCascader from './xps-cascader/xps-cascader.vue'
import XpsEditor from './xps-editor/xps-editor.vue'
import XpsUpload from './xps-upload/xps-upload.vue'
import XpsFilePicker from './xps-file-picker/xps-file-picker.vue'
import subFormSlot from './sub-form-slot/sub-form-slot.vue'
export default {
	name: 'generate-form',
	components: {
		XpsInput,
		XpsTextarea,
		XpsInputNumber,
		XpsRadio,
		XpsCheckbox,
		XpsTime,
		XpsDate,
		XpsDatetime,
		XpsDaterange,
		XpsDatetimerange,
		XpsRate,
		XpsColor,
		XpsPickerRadio,
		XpsPickerMultiple,
		XpsSwitch,
		XpsSlider,
		XpsTreeSelect,
		XpsHtml,
		XpsText,
		XpsCascader,
		XpsEditor,
		XpsUpload,
		XpsFilePicker,
		subFormSlot
	},
	data() {
		return {
			formData: [],
			formConfig: {},
			subForms: [],
			// activeType: ['select', 'selectTree', 'area', 'office', 'user', 'date', 'time', 'dict', 'cascader'],
			activeType: ['date', 'time']
		}
	},
	props: {
		data: {
			type: [Object, Array],
			default: () => {}
		},
		config: {
			type: Object,
			default: () => {}
		},
		tokenKey: {
			type: String,
			default: 'token'
		},
		serverUrl: {
			type: String,
			default: 'http://192.168.67.47:8080/xps-vue/app'
		}
	},
	watch: {
		data: {
			handler() {
				this.handlerData()
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		// 处理
		handlerData() {
			if(this.$store) { // 初始化校验状态
				this.$store.commit('validate/UPDATE_STATUS', false)
			}
			const data = JSON.parse(JSON.stringify(this.data))
			let { list, config } = data
			this.formConfig = config || this.config
			list = list || data
			if(list && list.length) {
				for(let i = 0; i < list.length; i++) {
					const item = list[i]
					const map = {
						'string': '',
						'number': 0,
						'array': [],
						'boolean': false
					}
					item.options.defaultValue = item.options.defaultValue ?? map[this.isValueType(item)]
					item.value = item.value ?? item.options.defaultValue
					item.readable = item.readable ?? true
					item.writable = item.writable ?? true

					// 子表单
					if(item.type == 'table') {
						item.subFormList = []
						item.value = item.value || JSON.stringify([])
						let rows = [] // 行数
						try {
							rows = JSON.parse(item.value)
						} catch(e) {console.error("[Error JSON.parse(value)]:", e)}
						const cols = item.tableColumns // 列数
						if(rows.length) {
							for(let row of rows) {
								let curRow = []
								for(let col of cols) {
									let curCol = JSON.parse(JSON.stringify(col))
									curCol.value = row[col.model] ?? map[this.isValueType(curCol)]
									curRow.push(curCol)
								}
								item.subFormList.push(curRow)
							}
						} else {
							this.subForms = cols
						}
					}
				}
				this.formData = list
			}
		},
		
		// 移除子表单
		deleteSubForm(subFormList, index, idx) {
			uni.showModal({
				title: '提示',
				content: '你确定要删除当前子表单吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						const reallyData = []
						for(let i = 0; i < subFormList.length; i++) {
							const childInstance = this.$refs[`subForm${index}${i}`][0]
							reallyData.push(childInstance.formData)
						}
						reallyData.splice(idx, 1)
						subFormList.splice(0, subFormList.length, ...reallyData)
					}
				}
			})
		},
		
		// 添加子表单
		addSubForm(subFormList) {
			let list = []
			if(subFormList.length) {
				list = JSON.parse(JSON.stringify(subFormList[0]))
			} else {
				list = JSON.parse(JSON.stringify(this.subForms))
			}
			const map = {
				'string': '',
				'number': 0,
				'array': [],
				'boolean': false
			}
			list.forEach(item => {
				item.value = item?.options?.defaultValue ?? map[this.isValueType(item)]
			})
			subFormList.push(list)
		},
		
		// 单选下拉库change 选择数据联动
		pickerRadioChange(obj) {
			for(let key in obj) {
				let idx = this.formData.findIndex(item => item.model == key)
				if(idx >= 0) {
					this.$set(this.formData[idx], 'value', obj[key])
				}
			}
		},
		
		// 获取json数据
		getData() {
			return new Promise(async (resolve, reject) => {
				try {
					const target = {}
					for(let i = 0; i < this.formData.length; i++) {
						const item = this.formData[i]
						if(item.type != 'table') {
							// 校验
							if(item.type != 'input') {
								if(item.options.required) {
									if(isEmpty(item.value)) {
										uni.showToast({
											title: item.options.requiredMessage || '请输入必填项！',
											icon: 'none'
										})
										if(this.$store) {
											this.$store.commit('validate/UPDATE_STATUS', true)
										}
										return
									}
								}
							} else {
								let { validator, validateMessage } = isValidInput({
									required: item.options.required,
									requiredMessage: item.options.requiredMessage,
									dataType: item.options.dataType,
									dataTypeCheck: item.options.dataTypeCheck,
									dataTypeMessage: item.options.dataTypeMessage,
									pattern: item.options.pattern,
									patternCheck: item.options.patternCheck,
									patternMessage: item.options.patternMessage,
									value: item.value
								})
								if(validator) {
									uni.showToast({
										title: validateMessage || '请输入必填项！',
										icon: 'none'
									})
									if(this.$store) {
										this.$store.commit('validate/UPDATE_STATUS', true)
									}
									return
								}
							}
							target[item.model] = item.value
						} else {
							target[item.model] = []
							for(let j = 0; j < item.subFormList.length; j++) {
								let map
								const childInstance = this.$refs[`subForm${i}${j}`][0]
								try {
									map = await childInstance.getData()
								} catch(e) {console.error("[Error getData]:", e)}
								target[item.model].push(map)
							}
						}
					}
					resolve(target)
				} catch(e) {
					reject(e)
				}
			})
		},
		
		// 判断默认value值类型
		isValueType(inp) {
			if(inp.type == 'select') {
				if(inp.options.multiple) {
					return 'array'
				} else {
					return 'string'
				}
			}
			if(inp.type == 'selectTree' || inp.type == 'area' || inp.type == 'office') {
				if(inp.options.checkbox) {
					return 'array'
				} else {
					return 'string'
				}
			}
			if(inp.type == 'user') {
				if(inp.options.isMultiple) {
					return 'array'
				} else {
					return 'string'
				}
			}
			if(inp.type == 'date') {
				if(inp.options.type == 'daterange' || inp.options.type == 'datetimerange') {
					return 'array'
				} else {
					return 'string'
				}
			}
			const stringType = ['input', 'textarea', 'radio', 'time', 'color', 'table', 'html', 'text', 'editor', 'dict']
			const numberType = ['number', 'rate', 'slider']
			const arrayType = ['checkbox', 'cascader', 'fileupload', 'imgupload']
			const booleanType = ['switch']
			if(stringType.indexOf(inp.type) >= 0) {
				return 'string'
			} else if(numberType.indexOf(inp.type) >= 0) {
				return 'number'
			} else if(arrayType.indexOf(inp.type) >= 0) {
				return 'array'
			} else if(booleanType.indexOf(inp.type) >= 0) {
				return 'boolean'
			}
			return 'string'
		}
	}
}
</script>

<style scoped>
.generate-form {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10rpx 10rpx 0rpx 10rpx;
	box-sizing: border-box;
	background-color: #f9f9f9;
}

.generate-form .row {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 5rpx;
	background-color: #FFFFFF;
}

.row-active:active {
	background-color: #f5f5f5;
}

.title {
	width: 170rpx;
	height: 60rpx;
	line-height: 60rpx;
  /* color: #1a1b1f; */
	color: #767a82;
	font-size: 30rpx;
	margin-right: 15rpx;
	text-align: right;
}

.leftPosition {
	text-align: start;
}

.rightPosition {
	text-align: end;
}

.topPosition {
	text-align: start;
	width: 100%;
	margin-bottom: 5rpx;
}

.right-frame {
	width: calc(100% - 200rpx);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.table-frame {
	width: 100%;
}

.lot-frame {
	width: 100%;
	padding: 0 10rpx;
	box-sizing: border-box;
}

.remove-subform {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	color: #409eff;
	font-size: 26rpx;
}

.addSubForm {
	width: 100%;
	border-top: 1px solid #f9f9f9;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}
.addSubForm > view {
	height: 65rpx;
	display: flex;
	align-items: center;
}

.validate-icon {
	color: #f56c6c;
}
</style>